<!DOCTYPE html>
<html lang="en">
<head>

    <!--晚上解决倒退现象-->
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        * {
            box-sizing: border-box;
        }

        #box {
            height: 600px;
            width: 800px;
            border: 1px solid black;
            margin: 0 auto;
            /*overflow:hidden作用是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏*/
            overflow: hidden;
            position: relative;

        }

        #scroller {
            /*transiton 用来控制过渡效果*/
            transition: all 1s; /*变形需要消耗0.7s完成  默认为ease 先慢再快再慢   linear 匀速  delay延迟   变形名称   执行时间  变化曲线 延迟时间*/
            position: relative;
        }

        /*设置图像标签  后代选择器    语法特点：选择器1  选择器2{}   通过选择器1找到选择器2*/
        #scroller img {
            height: 600px;
            width: 800px;
            position: absolute; /*绝对定位  父相子绝(根据父标签调整  不会超过父标签)*/
        }

        /*圆圈所在div对应的样式*/
        #control {
            height: 20px;
            position: absolute;
            /*z-index 设置元素的加载顺序,确保在背景轮播图上*/
            z-index: 999;
            left: 45%;
            bottom: 100px;
            transform: translateX(16px);
        }

        /*鼠标放上去的样式、每个圆圈的样式*/
        .point {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            cursor: pointer; /*鼠标放上去  手的样式*/
            border: 1px solid white;
            margin-right: 5px; /*设置右边距为5像素大小  让圆圈之间有间距*/
            float: left;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="scroller">
    </div>
</div>
<script>
    //1.初始化图片路径
    var images = ["../imgs/1.jpg", "../imgs/2.jpg", "../imgs/1.jpg", "../imgs/2.jpg"];
    //2.获取页面中轮播图的父标签
    var box = document.getElementById("box");
    var scroller = document.getElementById("scroller")
    //3.在scroller标签中创建图像子标签  遍历images数组
    for (var i = 0; i < images.length; i++) {
        //创建image图像标签 createElement()创建标签
        var img = document.createElement("img");
        img.src = images[i];
        img.style.left = i * 800 + "px";
        //把每一个创建的img标签放进scroller父标签中
        scroller.appendChild(img);
    }
    //4.创建最后一张图片和第一张相同
    var lastImg = document.createElement("img");
    lastImg.src = images[0];
    lastImg.style.left = images.length * 800 + "px";
    scroller.appendChild(lastImg);

    //5.创建控制点区域设置属性
    var controller = document.createElement("div");
    //给控制区域设置属性
    controller.id = "control";
    controller.style.width = images.length * 20 + "px";
    box.appendChild(controller);
    //6.在控制区域中创建中间的圆圈  遍历images数组
    for (var i = 0; i < images.length; i++) {
        var circle = document.createElement("div");
        //设置class值
        circle.className = "point";
        //圆圈需要放进控制区域标签中
        var control = document.getElementById("control");
        control.appendChild(circle);
    }
    //7.默认先给第一个圆圈标签背景颜色设置白色
    var circles = document.getElementsByClassName("point");
    circles[0].style.backgroundColor = "white";
    //8.先开定时器，让图片进行轮播
    //8.1 先定义一个变量，记录当前页面切换到了哪张图片
    var imageIndex = 0;
    setInterval(function () {
        //imageIndex 两秒钟递增1
        imageIndex++;
        if (imageIndex > images.length) {
            imageIndex = 1;
        }
        //设置移动的距离  每张图片移动的距离为800
        var offset = -imageIndex * 800;
        //让里面的div绑定图片的位置
        scroller.style.transform = "translateX(" + offset + "px)";
        //解决轮播图中的圆圈背景透明和白色之间切换
        //获取所有的圆圈
        var circlesDivs = document.getElementsByClassName("point");
        for (var i = 0; i < circlesDivs.length; i++) {
            //先把所有的圆圈的背景设置为透明的
            circlesDivs[i].style.background = "transparent";
        }
        //0 1 2 3 4
        circlesDivs[imageIndex % images.length].style.backgroundColor = "white";

        if(imageIndex==images.length){
            setTimeout(function (){
                // transition  属性用于控制元素的过渡效果，使其在一段时间内平滑地从一个状态过渡到另一个状态。
                // transform  属性用于对元素进行变换，可以实现旋转、缩放、平移和倾斜等效果
                scroller.style.transition="none";
                scroller.style.transform="translate(0,0)";
                setTimeout(function (){
                               scroller.style.transition="all 1s" ;
                        },10);
            }, 1000);
        }
    }, 2000);
    //9.给每一个圆圈绑定一个点击事件
    //遍历circles圆圈数组
    for (var i = 0; i < circles.length; i++) {
        //circles[i] onclick
        var clickDiv = circles[i];
        clickDiv.index = i;
        var offset;//设置对应图片的移动距离
        clickDiv.onclick = function () {
            //circles[i].style.background="transparent";
            for (var k = 0; k < circles.length; k++) {
                circles[k].style.background = "transparent";
            }
            //上面的图片的索引变量拿过来  this---->指代当前你点击对应的那个元素(元素/对象)
            imageIndex = this.index;
            offset = -imageIndex * 800;
            scroller.style.transform = "translateX(" + offset + "px)";
            circles[imageIndex].style.background = "white";
        }

    }
</script>
</body>
</html>